﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="AllBack.css">
    <title>后台</title>
</head>

<body>
    <div class="Nav">
        <!-- logo部分 -->
        <div class="logo">
            <img src="1.png" width="66" height="76">
            <div class="logoName">
                <p class="little">AllSpark studio</p>
                <p class="big">AllSpark工作室</p>
                <span class="lastLogo">官网</span>
            </div>
        </div>
    </div>

    <!-- 退出登录 -->
    <div class="login">
        <a href="">退出登录</a>
    </div>

    <!-- 后台管理列表 -->
    <div id="nav1">
        <div class="nav1">
            <ul>
                <li>顶栏<span><img src="./img/mb-tri-arrow-right.svg" alt="" class="triangle1"></span></li>
                <li>底栏</li>


                <li class="nav1-first">
                    <span><img src="./img/md-arrow_drop_down.svg" alt="" class="triangle"></span>首页
                </li>
                <li class="nav1-second" style="">简介</li>
                <li class="nav1-second event" >大事记</li>

                <li class="nav1-first"> <img src="./img/md-arrow_drop_down.svg" alt="" class="triangle3">职位</li>
                <li class="nav1-second">开发组</li>
                <li class="nav1-second">竞赛组</li>
                <li class="nav1-second">SC小组</li>
                <li>加入我们</li>
                <li>商务合作</li>
                <li>相关下载</li>
            </ul>

            <div id="menu_title1" class="menu_title" onclick="openMenu(this)">
                首页
                <div class="indicator" id="indicator1">^</div>
            </div>
            <div class="menu" id="menu1">
                <div class="item">
                    <a href="#">简介</a>
                </div>
                <li class="item_divider"></li>
                <div class="item">
                    <a href="#">大事记</a>
                </div>
            </div>

            <div id="menu_title2" class="menu_title" onclick="openMenu(this)">
                职位
                <div class="indicator" id="indicator2">^</div>
            </div>
            <div class="menu" id="menu2">
                <div class="item">
                    <a href="#">开发组</a>
                </div>
                <li class="item_divider"></li>
                <div class="item">
                    <a href="#">竞赛组</a>
                </div>
                <li class="item_divider"></li>
                <div class="item">
                    <a href="#">SC小组</a>
                </div>
            </div>
        </div>

    </div>

    <!-- 右边部分 -->
    <div class="rightpage">
        <div class="bigEvent">


            <!-- 大事记 -->
            <!-- 大事记后台部分 -->
            <form action="/Allspark/upload" enctype="multipart/form-data" method="post">
                <input type="file" name="file" />
                <input type="file" name="file1">
                <input type="text" name="text">
                <input type="text" name="date">
                <input type="submit" value="upload">
            </form>
            <!-- 大事记删除部分 -->
            <!-- <p>删除大事记</p> -->
            <form action="/Allspark/del" method="post" enctype="multipart/form-data">
                <input type="text" name="date">
                <input type="submit" value="delete">
            </form>
            <!-- 下载部分 -->
            <!-- <p>下载接口</p> -->
            <a href="/Allspark/download2" download="测试">点击下载</a>
            <!-- 上传部分 -->
            <!-- <p>上传接口</p> -->
            <form action="/Allspark/upload2" enctype="multipart/form-data" method="post">
                <input type="file" name="file">
                <input type="submit">
            </form>
            <p>记录时间的接口</p>
            <form action="/Allspark/hit" method="get">
                <input type="text" name="time">
                <input type="submit">
            </form>
        </div>

    </div>

    <script>
        // 大事记点击事件
        var event = document.querySelector('.event');
        
        event.onclick = function(){
            // 设置divEvent的样式为block
            var divEvent = document.querySelector('.bigEvent');
            divEvent.style.display = "block";
        }
        


    </script>
    <script type="text/javascript">
        var itemHeight = 40;
        var dividerHeight = 1;

        function openMenu(obj) {
            menuTitleId = obj.id;
            menuId = "menu" + menuTitleId.substring(10);
            indicatorId = "indicator" + menuTitleId.substring(10);

            menu = document.getElementById(menuId);
            indicator = document.getElementById(indicatorId);
            height = menu.style.height;

            if (height == "0px" || height == "") {
                childAmount = menu.getElementsByTagName('div').length;
                dividerAmount = menu.getElementsByTagName('li').length;
                height = childAmount * itemHeight + dividerAmount * dividerHeight;
                menu.style.height = height + "px";
                indicator.style.transform = "rotate(180deg)";
            } else {
                menu.style.height = "0px";
                indicator.style.transform = "rotate(0deg)";
            }
        }
    </script>
</body>

</html>